<template>
  <div>
    <div class="container f_r_c_c">
      <div class="contents f_r_c_c">
        <div class="content1 f_c_c_c" v-if="type == 1">
          <div class="header f_c_m_c">
            <img src="" alt="" />
            <img :src="hImg" alt="" />
          </div>
          <div class="f_c_m_c font-30 mt-10">
            <span>鱼儿想吃布丁等1人</span>
            <span
              >帮你砍了
              <span class="color_EA4237">30</span>
              金币</span
            >
          </div>
          <div class="progress">
            <progressBar :item="{ percentage: 20, tagShow: true }" />
          </div>
          <span class="font-28 color_666">你的砍价进度已经超过67%的用户</span>
          <div class="btn" @click="clickBtn()">
            <img :src="btn2_img" alt="" />
            <div class="f_r_c_c font-36 color_fff">喊好友砍一刀</div>
          </div>
        </div>
        <div class="content2 f_c_c_c" v-if="type == 2">
          <img :src="js_bac_img" alt="" />
          <div class="f_c_m_c">
            <div class="f_c_m_c font-30 mt-10">
              <span
                >你已砍了
                <span class="color_EA4237">{{ goodsInfo.cur_num }}</span>
                {{ goodsPageTypeText }}</span
              >
            </div>
            <div class="progress">
              <progressBar
                :item="{ percentage: goodsInfo.percentage, tagShow: true }"
              />
            </div>
            <span class="font-28 color_666">继续分享再加速10%</span>
            <div class="btn" @click="clickShare()">
              <img :src="btn2_img" alt="" />
              <div class="f_r_c_c font-36 color_fff">继续分享</div>
            </div>
          </div>
        </div>
        <div class="content3 f_c_c_c" v-if="type == 3">
          <img :src="lh_bac_img" alt="" />
          <div class="f_c_m_c ">
            <span>天降大礼</span>
            <div class="f_c_m_c goods">
              <div class="f_c_m_c">
                <img :src="yhj_img" alt="" />
                <div class="f_r_sb_c">
                  <div class="money f_r_m_fe">
                    <span>¥</span>
                    <span>5</span>
                  </div>
                  <div class="f_c text">
                    <span>云手机无门槛券通用</span>
                    <span>超值福利</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="btn" @click="clickBtn()">
              <img :src="btn4_img" alt="" />
              <div class="f_r_c_c font-36 color_8C1D10 bold_500">收下神券</div>
            </div>
          </div>
        </div>
        <div class="content4 f_c_c_c" v-if="type == 4">
          <img :src="lh_bac_img" alt="" />
          <div class="f_c_m_c ">
            <span>运气不错，恭喜获得</span>
            <div class="f_c_m_c goods">
              <div class="f_c_m_c">
                <div class="f_r_sb_c">
                  <div class="money f_r_m_fe">
                    <img src="" alt="" />
                  </div>
                  <div class="f_c text">
                    X8云手机10/H畅享型pro1台（1天）
                  </div>
                </div>
              </div>
            </div>
            <div class="btn" @click="clickBtn()">
              <img :src="btn4_img" alt="" />
              <div class="f_r_c_c font-36 color_8C1D10 bold_500">立即领取</div>
            </div>
          </div>
        </div>
        <div class="content5 f_c_c_c" v-if="type == 5">
          <img :src="tjdl_bac_img" alt="" />
          <div class="f_c_m_c color_fff font-36">
            <span>恭喜你获得</span>
            <span class="font-26">【X8云手机10/H畅享型pro1台（1天）】</span>
            <span>点击立即领取</span>
            <div class="btn" @click="clickBtn()">
              <img :src="jb_img" alt="" />
            </div>
          </div>
        </div>
        <div class="content6 f_c_c_c" v-if="type == 6" @click="clickBtn()">
          <img :src="hb_tjdl_img" alt="" />
          <div class="f_c_m_c color_FFE9D8 bold_500 font-48">
            <span>恭喜你获得现金红包</span>
            <span>点击立即领取</span>
          </div>
        </div>
        <div class="content7 f_c_c_c" v-if="type == 7">
          <img :src="hb_1_img" alt="" />
          <div class="f_c_m_c ">
            <div class="f_c_m_c color_FFE9D8 bold_500 font-48">
              <span>恭喜你获得现金红包</span>
            </div>
            <div class="btn" @click="clickBtn()">
              <img :src="btn4_img" alt="" />
              <div class="f_r_c_c font-36 color_8C1D10 bold_500">立即领取</div>
            </div>
          </div>
        </div>
        <!-- 兑奖 手办 4-->
        <div class="content8 f_c_c_c" v-if="type == 8">
          <span class="font-36 bold_500 mb-20">填写兑奖信息</span>
          <van-form @submit="onSubmit" style="width:100%">
            <van-cell-group inset>
              <van-field
                v-model="formData.telephone"
                type="Number"
                name="telephone"
                label="联系电话"
                placeholder="联系电话"
                :rules="[
                  { pattern, required: true, message: '请填写联系电话' },
                ]"
              />
              <van-field
                v-model="formData.name"
                name="name"
                label="收件人"
                placeholder="收件人"
                :rules="[{ required: true, message: '请填写收件人' }]"
              />
              <van-field
                v-model="formData.area"
                name="area"
                label="收件地址"
                placeholder="收件地址"
                :rules="[{ required: true, message: '请填写收件地址' }]"
              />
              <van-field
                v-model="formData.telephone2"
                type="Number"
                name="telephone2"
                label="收件电话"
                placeholder="收件电话"
                :rules="[
                  { pattern, required: true, message: '请填写收件电话' },
                ]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
          <span class="mt-20 color_999"
            >请完整填写以上信息，避免因信息填写错误导致兑奖失败</span
          >
        </div>
        <!-- 点券 3 -->
        <div class="content8 f_c_c_c" v-if="type == 9">
          <span class="font-36 bold_500 mb-20">填写兑奖信息</span>
          <van-form @submit="onSubmit" style="width:100%">
            <van-cell-group inset>
              <van-field
                v-model="formData.game_name"
                name="game_name"
                label="游戏名称"
                placeholder="游戏名称"
                :rules="[{ required: false, message: '请填写游戏名称' }]"
              />
              <van-field name="system" label="版本">
                <template #input>
                  <van-radio-group
                    v-model="formData.system"
                    direction="horizontal"
                  >
                    <van-radio name="ios">苹果</van-radio>
                    <van-radio name="android">安卓</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-field name="login_type" label="登陆方式">
                <template #input>
                  <van-radio-group
                    v-model="formData.login_type"
                    direction="horizontal"
                  >
                    <van-radio name="qq">QQ</van-radio>
                    <van-radio name="wx">微信</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-field
                v-model="formData.area"
                name="area"
                label="区服"
                placeholder="区服"
                :rules="[{ required: false, message: '请填写区服' }]"
              />
              <van-field
                v-model="formData.name"
                name="name"
                label="账号昵称"
                placeholder="账号昵称"
                :rules="[{ required: true, message: '请填写账号昵称' }]"
              />
              <van-field
                v-model="formData.telephone"
                type="Number"
                name="telephone"
                label="联系电话"
                placeholder="联系电话"
                :rules="[
                  { pattern, required: true, message: '请填写联系电话' },
                ]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
          <span class="mt-20 color_999"
            >请完整填写以上信息，避免因信息填写错误导致兑奖失败</span
          >
        </div>

        <!-- 现金-->
        <div class="content8 f_c_c_c" v-if="type == 10">
          <span class="font-36 bold_500 mb-20">填写兑奖信息</span>
          <van-form @submit="onSubmit" style="width:100%">
            <van-cell-group inset>
              <van-field
                v-model="formData.telephone"
                type="Number"
                name="telephone"
                label="联系电话"
                placeholder="联系电话"
                :rules="[
                  {
                    pattern,
                    required: true,
                    message: '请填写联系电话',
                  },
                ]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
          <span class="mt-20 color_999"
            >请完整填写以上信息，避免因信息填写错误导致兑奖失败</span
          >
        </div>
       
        <img :src="close_img" @click="clickClose()" class="closeImg" alt="" />
      </div>
    </div>
    <van-overlay :show="isShow" />
  </div>
</template>

<script>
import hImg from "@/assets/h.png";
import btn2_img from "@/assets/btn2.png";
import btn4_img from "@/assets/btn4.png";
import close_img from "@/assets/close.png";
import js_bac_img from "@/assets/js_bac.png";
import lh_bac_img from "@/assets/lh_bac.png";
import tjdl_bac_img from "@/assets/tjdl.png";
import jb_img from "@/assets/jb.png";
import hb_1_img from "@/assets/hb_1.png";
import hb_tjdl_img from "@/assets/hb_tjdl.png";
import yhj_img from "@/assets/yhj.png";


import progressBar from "./progressBar.vue";

import { award } from "@/api/goods";
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 0,
    },
  },
  model: {
    prop: "isShow",
    event: "changeDialog",
  },
  watch: {
    isShow: {
      immediate: true,
      handler(val) {
        this.goodsInfo = this.$parent.goodsInfo;
        this.goodsPageTypeText = this.$parent.type == 1 ? "元" : "金币";
      },
    },
  },
  components: { progressBar },
  data() {
    return {
      pattern: /^1[34578]\d{9}$/,
      goodsPageTypeText: "",
      goodsInfo: {},
      rule_title_img,
      yhj_img,
      hImg,
      btn2_img,
      close_img,
      js_bac_img,
      lh_bac_img,
      btn4_img,
      tjdl_bac_img,
      jb_img,
      hb_1_img,
      hb_tjdl_img,
      info: {},
      formData: {
        game_name: "",
        system: "ios",
        login_type: "qq",
        name: "",
        qq: "",
        area: "",
        telephone: "",
        telephone2: "",
        qq: "",
        qq: "",
      },
      // patternPhone:(val) => /^(([0+]d{2,3}-)?(0d{2,3})-)?(d{7,8})(-(d{3,}))?$/.test(val)
    };
  },
  methods: {
    clickShare() {
      this.$parent.shareUrl();
      this.clickClose();
    },
    onSubmit(val) {
      console.log("onSubmit", val);
      this.$emit("sub", val);
    },
    clickBtn() {
      this.$emit("sub", this.type);
    },
    clickClose() {
      this.$emit("changeDialog", false);
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.contents {
  width: 100%;
  position: relative;
}
.closeImg {
  width: 56px;
  height: 56px;
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
}
.content1 {
  position: relative;
  width: 560px;
  height: 458px;
  background: linear-gradient(1deg, #fff8e8, #ffffff);
  border-radius: 24px;
  .progress {
    width: 380px;
    margin: 50px 0;
  }
  > .header {
    position: absolute;
    top: -30px;
    > img:nth-child(1) {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      width: 136px;
      height: 136px;
      box-sizing: border-box;
      border: 2px solid #fff;
      background: red;
      position: absolute;
      top: -90px;
    }
    > img:nth-child(2) {
      width: 280px;
      height: 78px;
    }
  }
  .btn {
    width: 353px;
    height: 109px;
    position: relative;
    margin-top: 20px;
    > img {
      width: 100%;
      height: 100%;
    }
    > div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: -10px;
      left: 0;
    }
  }
}
.content2 {
  position: relative;
  width: 560px;
  height: 617px;
  .progress {
    width: 380px;
    margin: 40px 0;
  }
  > img {
    width: 100%;
    height: 100%;
  }
  > div {
    width: 100%;
    height: 62%;
    position: absolute;
    bottom: 0;
    left: 0;
    .btn {
      width: 353px;
      height: 109px;
      position: relative;
      margin-top: 20px;
      > img {
        width: 100%;
        height: 100%;
      }
      > div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: -10px;
        left: 0;
      }
    }
  }
}
.content3 {
  position: relative;
  width: 662px;
  height: 697px;
  > img {
    width: 100%;
    height: 100%;
  }
  > div {
    width: 416px;
    height: 82%;
    position: absolute;
    bottom: 0;
    left: 47%;
    transform: translateX(-50%);
    > span {
      color: #ff0f0f;
      font-size: 68px;
      font-weight: bold;
      margin: 30px 0;
    }
    .goods {
      width: 100%;
      height: 130px;
      overflow: auto;
      > div {
        width: 100%;
        position: relative;
        > img {
          width: 100%;
          height: 100%;
        }
        > div {
          width: 100%;
          height: 116px;
          margin-bottom: 10px;
          border-radius: 10px;
          position: absolute;
          top: 0;
          left: 0;
          .money {
            color: #dc1919;
            line-height: 1;
            > span:nth-child(1) {
              margin-left: 28px;
              font-size: 28px;
            }
            > span:nth-child(2) {
              font-size: 56px;
            }
          }
          .text {
            color: #33211d;
            line-height: 1;
            margin-right: 50px;
            > span:nth-child(1) {
              font-size: 26px;
            }
            > span:nth-child(2) {
              font-size: 24px;
              color: #665f5b;
              margin-top: 10px;
            }
          }
        }
      }
    }
    .btn {
      width: 315px;
      height: 90px;
      position: absolute;
      bottom: 20px;
      > img {
        width: 100%;
        height: 100%;
      }
      > div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0;
      }
    }
  }
}
.content4 {
  position: relative;
  width: 662px;
  height: 697px;
  > img {
    width: 100%;
    height: 100%;
  }
  > div {
    width: 416px;
    height: 82%;
    position: absolute;
    bottom: 0;
    left: 47%;
    transform: translateX(-50%);
    > span {
      color: #ff0f0f;
      font-size: 38px;
      font-weight: bold;
      margin-top: 80px;
      margin-bottom: 30px;
    }
    .goods {
      width: 100%;
      height: 130px;
      overflow: auto;
      > div {
        width: 100%;
        > div {
          width: 100%;
          height: 116px;
          background: #fff;
          margin-bottom: 10px;
          border-radius: 10px;
          .money {
            width: 96px;
            height: 96px;
            margin-left: 10px;
            margin-right: 20px;
            > img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            display: flex;
            flex: 1;
            color: #333333;
            font-weight: 400;
            font-size: 28px;
          }
        }
      }
    }
    .btn {
      width: 315px;
      height: 90px;
      position: absolute;
      bottom: 20px;
      > img {
        width: 100%;
        height: 100%;
      }
      > div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0;
      }
    }
  }
}
.content5 {
  position: relative;
  width: 640px;
  height: 812px;
  > img {
    width: 100%;
    height: 100%;
  }
  > div {
    width: 600px;
    height: 46%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    > span:nth-child(2) {
      color: #ffe743;
      margin: 25px 0;
    }
    .btn {
      width: 155px;
      height: 155px;
      position: absolute;
      bottom: 20px;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.content6 {
  position: relative;
  width: 582px;
  height: 888px;
  > img {
    width: 100%;
    height: 100%;
  }
  > div {
    width: 600px;
    height: 26%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    > span:nth-child(1) {
      margin-bottom: 20px;
    }
  }
}
.content7 {
  position: relative;
  width: 540px;
  height: 695px;
  > img {
    width: 100%;
    height: 100%;
  }
  > div {
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    > span:nth-child(1) {
      margin-bottom: 20px;
    }
  }
  .btn {
    width: 315px;
    height: 90px;
    position: absolute;
    bottom: 60px;
    > img {
      width: 100%;
      height: 100%;
    }
    > div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0;
    }
  }
}
.content8 {
  position: relative;
  width: 80%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 30px;
}

</style>
